<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../bootstrap-4.6.2-dist/js/jquery-3.5.1.slim.min.js"></script>
    <script src="../bootstrap-4.6.2-dist/js/popper.min.js"></script>
    <script src="../bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-danger navbar-dark">
        <!-- Dropdown button -->
        <a class="navbar-brand text-warning" href="#">MobileShop</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navtop">
            <span class="navbar-toggler-icon bg-dark"></span>
        </button>
        <!-- Dropdown content -->
        <div class="collapse navbar-collapse" id="navtop">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-warning" href="index.html">Index</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-warning" href="products.html">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-warning" href="promotions.html">Promotions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-warning" href="#">Details</a>
                </li>
            </ul>
        </div>
        <!-- Navigations/Breadcrumb
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Index</li>
            <li class="breadcrumb-item">Intro</li>
            <li class="breadcrumb-item">Details</li>
            <li class="breadcrumb-item">Contact</li>
        </ol> -->
    </nav>
    <div class="container">
        <hr class="bg-danger">
        <h4>Login to your account</h4>
        <hr class="bg-danger">
        <form class="m-3">
        <!-- Text input effect -->
         <div class="form-group">
            <label for="email">Name</label>
            <input type="text" class="form-control" id="email" required>
            <div class="invalid-feedback">
                Please enter a vaildated name!
            </div>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" required>
            <div class="invalid-feedback">
                Please enter password!
            </div>
        </div>
        <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" class="form-control" id="email" required>
            <div class="invalid-feedback">
                Please enter a email address!
            </div>
        </div>
        <div class="form-group">
            <label for="password">Verifying Code</label>
            <input type="password" class="form-control" id="password" required>
            <div class="invalid-feedback">
                Please enter password!
            </div>
        </div>
        <button type="submit" class="btn btn-primary" onclick= return function()>Submit</button>
        </form>
    </div>
    <script>
        (function(){
            'use strict';
            window.addEventListener('load', function(){
                var forms = document.getElementsByClassName('needs-validation');
                var vaildation = Array.prototype.filter.call(forms, function(form){
                    form.addEventListener('submit', function(event){
                        if(form.checkVaildity()===false){
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                        
                    }, false);
                });
            }, false);
        })();
    </script>    
</body>
</html>